<template>
	<view class="container"
		:style="{background: 'rgba(15,26,102,1)', width: '750rpx', height: 'auto', overflow: 'hidden'}"
		style="padding-bottom: 100rpx;box-sizing: border-box;">
		<navigationBar :myProperty="propertyInfo"></navigationBar>
		<view class="bottom-btn-wrapper" v-for="(item, index) in startLunList" :key="index"
			:style="{bottom: index === currentIndex ? '60rpx' : '-100vh'}">
			<view class="bottom-btn">
				<!-- <store-product appid="wx39e3846bef442e8a" :product-id="item.productId" :custom-content="true"
					@bindentersuccess="bindentersuccess" @bindentererror="bindentererror">
					
				</store-product> -->
				<view class="bottom-btn" :style="{backgroundImage:`url(${mlr_start})`}" @click="addAddress"
					v-if="!pageLoading">
					<view>{{addAddressText?addAddressText:'领取我的水晶'}}</view>
					<view v-if="!addAddressText">{{'平衡我的'+item.text}}</view>
				</view>
			</view>
		</view>
		<view class="mlr-male-bg" :style="{backgroundImage:`url(${maiLunSex=='1'?mlr_male_bg:mlr_fmale_bg})`}">
		</view>
		<image class="mlr-male-ic" :src="maiLunSex=='1'?mlr_male_ic:mlr_fmale_ic" />
		<view class="mailun-loading">
			<mai-lun-loading :lineList="lineList"></mai-lun-loading>
		</view>
		<view class="mailun-table">
			<view :class="['mailun-tr', `status${item.status}`]" v-for="(item, index) in lineList" :key="index">
				<view class="mailun-name">{{item.text}}（{{item.textE}}）</view>
				<view class="mailun-status">{{getStatusName(item.status)}}</view>
				<view class="mailun-score">{{item.height}}%</view>
			</view>
		</view>
		<view class="center-box">
			<view class="center-swiper-box" :style="{backgroundImage: `url(${bg2}), url(${bg1})`}">
				<swiper class="swiper-box" :current="currentIndex" @change="setCurrentIndex"
					:style="{height: swiperHeight}">
					<swiper-item class="swiper-item" v-for="(item, index) in startLunList" :key="index">
						<view class="mlr-bottom-bg">
							<image class="detail-bg" :src="item.bg" />
							<image class="bg3" :src="bg3" />
							<image class="bg4" :src="bg4" />
							<view class="mailun-detail-bg" />
							<view :class="['detail', `detail${index}`]">
								<view class="shop-img-row">
									<image :src="mlr_jt_left" class="jt-left" v-if="haveClose&&startLunList.length>1"
										@click.stop="preIndex"></image>
									<image :src="mlr_jt_right" class="jt-right" v-if="haveClose&&startLunList.length>1"
										@click.stop="nextIndex"></image>
								</view>
								<image :src="detailBtn" class="detail-btn" @click.stop="viewDetail" />
								<image :src="detailShow ? detailUp : detailDown" class="detail-arrow-btn"
									@click.stop="viewDetail" />
								<view class="ml-introduce" v-show="detailShow">{{item['ml-info']}}</view>
								<image :src="getStatusImg(item.status)" mode="" class="mlr-lock"></image>
								<view class="mlri-title">{{item['ml-title']}}</view>
								<view class="mlri-info">{{item['ml-state-info']}}</view>
								<image :src="item.shopImg" mode="aspectFill" class="shop-img"></image>
								<view class="mlri-shop-title">{{item.shopTitle}}</view>
								<view class="mlri-shop-text">{{item['ml-explain']}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view style="margin-top: -200rpx;">
				<view v-for="(item,index) in 10" :key="index">
					<image :src="`${xiaoCiR+(index+1)}.png`" mode="widthFix"
						style="width: 100%;display: block;margin-top: -2rpx;"></image>
				</view>
			</view>
		</view>
		<view class="user-info">
			<view class="ui-name">{{getUserInfo.nickName}}</view>
			<view class="ui-time-title">测算时间：</view>
			<view class="ui-time">{{resultDetails.dateTime}}</view>
		</view>
		<view style="position: fixed;width: 100vw;height: 100vh;left: 0;top: 0;bottom: 0;left: 0;z-index: 999;"
			class="flex-cc" v-if="isShowTakeAnim">
			<image :src="startLunList[0].shopImg" mode="aspectFill" class="take-anim"></image>
		</view>
		<!-- <image :src="mrl_retest" class="mrl-retest" mode="" @click="goRetest"></image> -->
	</view>
</template>

<script>
	import maiLunLoading from '@/components/mai-lun-loading/mai-lun-loading.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		editMerchandiseReport,
		getMerchandiseReportId
	} from '@/common/api/index_api.js'

	export default {
		props: {
			pageData: {
				type: Object,
				default: null
			}
		},
		components: {
			maiLunLoading
		},
		data() {
			return {
				propertyInfo: {
					"bg_color": "transparent",
					"color": "#fff",
					"flag": 4,
					"name": "",
					"hasEntity": false,
				},
				xiaoCiR: this.$imgWxkjUrl + '/product/result/xiaoci/r_', //消磁套图
				maiLunSex: 0,
				mlr_jt_left: this.$imgWxkjUrl + '/product/result/mlr_jt_left.png',
				mlr_jt_right: this.$imgWxkjUrl + '/product/result/mlr_jt_right.png',
				mlr_male_bg: this.$imgWxkjUrl + '/product/result/mlr_male_bg.png',
				mlr_male_ic: this.$imgWxkjUrl + '/product/result/mlr_male_ic.png',
				closeImg: this.$imgWxkjUrl + '/product/result/mlr_lock.png',
				mlr_fmale_bg: this.$imgWxkjUrl + '/product/result/mlr_fmale_bg.png',
				mlr_fmale_ic: this.$imgWxkjUrl + '/product/result/mlr_fmale_ic.png',
				mrl_retest: this.$imgWxkjUrl + '/product/result/mrl_retest.png',
				mlr_start: this.$imgWxkjUrl + '/product/result/mlr_start_new_new.png',
				bg1: this.$imgWxkjUrl + '/product/result/bg1.png',
				bg2: this.$imgWxkjUrl + '/product/result/bg2.png',
				bg3: this.$imgWxkjUrl + '/product/result/bg3.png',
				bg4: this.$imgWxkjUrl + '/product/result/bg4.png',
				detailBtn: this.$imgWxkjUrl + '/product/result/detail_btn.png',
				detailDown: this.$imgWxkjUrl + '/product/result/down.png',
				detailUp: this.$imgWxkjUrl + '/product/result/up.png',
				normalImg: this.$imgWxkjUrl + '/product/result/normal.png',
				activeImg: this.$imgWxkjUrl + '/product/result/active.png',
				scloReportDetail: null,
				resultDetails: null,
				lineList: [],
				startLunList: [],
				currentIndex: 0,
				haveClose: false,
				haveMiddle: false,
				haveActive: false,
				detailShow: false,
				swiperHeight: '2822rpx',
				addAddressText: '',
				isShowTakeAnim: false,
				pageLoading: true
			}
		},
		computed: {
			...mapGetters('user', ['uGender'])
		},
		watch: {
			pageData: {
				handler(val) {
					if (val) {
						this.maiLunSex = this.uGender || 0
						const resultDetails = val.resultDetails
						this.resultDetails = resultDetails
						if (this.resultDetails.scloReportDetail) {
							this.scloReportDetail = JSON.parse(this.resultDetails.scloReportDetail);
						}
						this.lineList = []
						if (this.resultDetails.resultList && this.resultDetails.resultList.length > 0) {
							this.resultDetails.resultList.map((item, index) => {
								let resultDesc = JSON.parse(item.resultDesc)
								const qujianArr = this.resultDetails.resultSetMap.find(({
									dmnsName
								}) => dmnsName === item.dmnsName).qujian.split(',')
								resultDesc.height = Math.floor(item.score / (+(qujianArr[qujianArr.length - 1]) -
									1) * 100)
								this.lineList.push(resultDesc)
							})
						}

						this.startLunList = []
						let startLineList = JSON.parse(JSON.stringify(this.lineList));

						this.haveClose = false;
						this.haveMiddle = false;
						this.haveActive = false;
						startLineList.map(item => {
							if (item.status == '0') {
								this.haveClose = true
							} else if (item.status == '1') {
								this.haveMiddle = true;
							} else {
								this.haveActive = true
							}
						})
						let myArray = []; //记录符合条件的数据
						if (this.haveClose) {
							startLineList.map(item => {
								if (item.status == '0') {
									myArray.push(item);
								}
							})
						} else if (this.haveActive) {
							let haveActiveList = startLineList.sort((a, b) => b.height - a.height);
							let itemActive = haveActiveList[0]
							haveActiveList.map(item => {
								if (itemActive.height == item.height) {
									myArray.push(item)
								}
							})
						} else {
							let haveMiddleList = startLineList.sort((a, b) => a.height - b.height);
							let itemMiddle = haveMiddleList[0]
							haveMiddleList.map(item => {
								if (itemMiddle.height == item.height) {
									myArray.push(item)
								}
							})
						}

						this.startLunList.push(myArray[0]);
						this.resultDetails.dateTime = uni.$u.timeFormat(this.resultDetails.createDate, 'yyyy年mm月dd日')
						this.$forceUpdate();
						this.getSwiperHeight()
						editMerchandiseReport({
							merchandiseReportId: this.resultDetails.id
						}).then(res => {

						})
						getMerchandiseReportId({
							merchandiseReportId: this.resultDetails.id
						}).then(res => {
							res = res.data;
							if (res.code == 200 && res.data && res.data.virtualGoodsUid) {
								if (res.data.addressId) {
									this.addAddressText = '查看收货地址'
								} else {
									this.addAddressText = '填写收货地址'
								}
							}
							this.pageLoading = false;
						})
					}
				},
				immediate: true,
				deep: true
			}
		},
		created() {
			uni.$on('updateMaiLunAddress', (addressId) => {
				this.addAddressText = '查看收货地址'
				editMerchandiseReport({
					merchandiseReportId: this.resultDetails.id,
					addressId: addressId
				})
			})
		},
		destroyed() {
			uni.$off('updateMaiLunAddress')
		},
		methods: {
			addAddress() {
				if (this.isShowTakeAnim) return
				if (this.$fangBaoClick()) return
				if (this.addAddressText) {
					let isFirstAddAddress = this.addAddressText == '查看收货地址' ? 'N' : 'Y';
					uni.navigateTo({
						url: '/subcontractorMaiLun/pages/maiLunAddress/maiLunAddress?reportId=' + this
							.resultDetails.id + '&isFirstAddAddress=' + isFirstAddAddress
					})
				} else {
					editMerchandiseReport({
						merchandiseReportId: this.resultDetails.id,
						virtualGoodsUid: this.startLunList[0].productId
					}).then(res => {
						res = res.data
						if (res.code == 200) {
							this.isShowTakeAnim = true;
							setTimeout(() => {
								this.isShowTakeAnim = false;
								this.addAddressText = '填写收货地址'
								this.$showToast('成功领取水晶')
							}, 2000)
						} else {
							this.$showToast(res.message)
						}
					})
				}

			},
			shuffleArray(array) {
				const newArray = [...array]; // 创建副本以避免修改原数组
				for (let i = newArray.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1)); // 随机索引
					[newArray[i], newArray[j]] = [newArray[j], newArray[i]]; // 交换元素
				}
				return newArray;
			},
			bindentersuccess(event) {
				this.$u.api.addLog({
					sourseType: 999
				})
			},
			bindentererror(event) {
				this.$showToast("请及时联系客服" + event.detail.code)
				this.$u.api.addLog({
					sourseType: 998
				})
			},
			setCurrentIndex(e) {
				console.log(e)
				this.currentIndex = e.detail.current
				this.getSwiperHeight()
			},
			preIndex() {
				if (this.currentIndex == 0) {
					this.$showToast('已是第一个')
					return
				}
				this.currentIndex--;
				this.getSwiperHeight()
			},
			nextIndex() {
				if (this.currentIndex == this.lineList.length - 1) {
					this.$showToast('已是最后一个')
					return
				}
				this.currentIndex++;
				this.getSwiperHeight()
			},
			goRetest() {
				uni.navigateTo({
					url: '/subcontractorMaiLun/pages/introduce/introduce?sclId=' + this.resultDetails.sclId
				})
			},
			getStatusName(status) {
				switch (status) {
					case 0:
						return '已关闭'
					case 1:
						return '正常'
					case 2:
						return '过于活跃'
					default:
						return ''
				}
			},
			getStatusImg(status) {
				switch (status) {
					case 0:
						return this.closeImg
					case 1:
						return this.normalImg
					case 2:
						return this.activeImg
					default:
						return ''
				}
			},
			viewDetail() {
				this.detailShow = !this.detailShow
				this.getSwiperHeight()
			},
			getSwiperHeight() {
				this.$nextTick(() => {
					uni.createSelectorQuery().in(this).select(`.detail${this.currentIndex}`).boundingClientRect(
						res => {
							this.swiperHeight = `${res.height + 680}px`
						}).exec()
				})
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		beforeDestroy() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.take-anim {
		width: 350rpx;
		height: 350rpx;
		display: block;
		animation: fadeScale 2s ease-in-out forwards;
	}

	@keyframes fadeScale {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes move {

		0%,
		50%,
		100% {
			transform: translateY(0);
		}

		25% {
			transform: translateY(-25rpx);
		}

		75% {
			transform: translateY(25rpx);
		}
	}

	.bottom-btn {
		width: 598rpx;
		height: 401rpx;
		display: block;
		margin: 0 auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		letter-spacing: 3rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.ml-introduce {
		width: 626rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 44rpx;
		letter-spacing: 2rpx;
		text-align: justify;
		margin: 80rpx auto 0;
	}

	.mlr-lock {
		width: 100rpx;
		height: 138rpx;
		display: block;
		margin: 27rpx auto 0;
	}

	.mlri-title {
		font-weight: bold;
		font-size: 45rpx;
		color: #99F4FF;
		line-height: 63rpx;
		letter-spacing: 4rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 34rpx;
	}

	.mlri-info {
		font-size: 38rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		letter-spacing: 3rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 16rpx;
		width: 477rpx;
	}

	.shop-img-row {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		margin-top: 64rpx;
		height: 113rpx;
	}

	.shop-img {
		width: 350rpx;
		height: 350rpx;
		display: block;
		margin: 0 auto;
		margin-top: 27rpx;
	}

	.mlri-shop-title {
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 44rpx;
		letter-spacing: 3rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.mlri-shop-text {
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 44rpx;
		letter-spacing: 2rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 25rpx;
		width: 626rpx;
	}

	.center-box {
		position: relative;
		z-index: 0;
	}

	.center-swiper-box {
		background-position: center bottom, center top;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.jt-left {
		width: 69rpx;
		height: 113rpx;
		margin-right: 265rpx;
	}

	.jt-right {
		width: 69rpx;
		height: 113rpx;
		margin-left: 265rpx;
	}

	.swiper-box {
		width: 100%;
	}

	.user-info {
		position: absolute;
		left: 49rpx;
		top: 281rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 45rpx;
		letter-spacing: 2rpx;
		z-index: 5;
	}

	.mrl-retest {
		width: 210rpx;
		height: 70rpx;
		position: absolute;
		right: 0;
		top: 292rpx;
		z-index: 5;
	}

	.mlr-male-bg {
		width: 100%;
		height: 1200rpx;
		background-size: 100% 100%;
		display: block;
		position: relative;
		z-index: 2;
	}

	.mlr-bottom-bg {
		width: 100%;
		background-size: 100% auto;
		box-sizing: border-box;
		background-position: center 709rpx;
		background-repeat: no-repeat;
		padding-top: 850rpx;
		padding-bottom: 163rpx;
	}

	.mlr-male-ic {
		width: 130rpx;
		height: 202rpx;
		top: 425rpx;
		right: 57rpx;
		position: absolute;
		animation: move 4s linear infinite;
		z-index: 5;
	}

	.mailun-loading {
		position: absolute;
		top: 931rpx;
		width: 100%;
		z-index: 3;
	}

	.mailun-table {
		font-weight: bold;
		font-size: 26rpx;
		color: #DDD;
		line-height: 37rpx;
		letter-spacing: 2rpx;
		width: 640rpx;
		margin: 0 auto;
		top: 1378rpx;
		left: 0;
		right: 0;
		position: absolute;
		z-index: 1;

		.mailun-tr {
			display: flex;

			view {
				padding: 9rpx 0;
			}

			&.status2 .mailun-status,
			&.status2 .mailun-score {
				color: #FFC765;
			}

			&.status0 .mailun-status,
			&.status0 .mailun-score {
				color: #48E9FF;
			}
		}

		.mailun-name {
			width: 50%;
		}

		.mailun-status {
			width: 40%;
		}

		.mailun-score {
			width: 10%;
		}
	}

	.mailun-detail-bg {
		width: 689rpx;
		background-image: linear-gradient(180deg, #293AA1 0%, #121B68 100%);
		border-radius: 14rpx;
		margin: 0 auto;
		position: absolute;
		z-index: 1;
		bottom: 218rpx;
		top: 862rpx;
		left: 0;
		right: 0;
	}

	.bg3 {
		width: 596rpx;
		height: 246rpx;
		margin: 0 auto;
		left: 0;
		right: 0;
		position: absolute;
		top: 952rpx;
		z-index: 3;
	}

	.detail-bg {
		top: 709rpx;
		height: 724rpx;
		width: 750rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		position: absolute;
		z-index: 2;
	}

	.detail-btn {
		display: block;
		width: 275rpx;
		height: 64rpx;
		margin: 16rpx auto;
	}

	.detail {
		position: relative;
		z-index: 4;
		transition: all 0.3s linear;
	}

	.detail-arrow-btn {
		display: block;
		width: 20rpx;
		height: 20rpx;
		margin: 0 auto;
	}

	.bg4 {
		width: 750rpx;
		height: 984rpx;
		margin: 0 auto;
		left: 0;
		right: 0;
		position: absolute;
		top: 1484rpx;
		z-index: 3;
	}

	.bottom-btn-wrapper {
		width: 598rpx;
		height: 175rpx;
		margin: 0 auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		letter-spacing: 3rpx;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: fixed;
		bottom: 1rpx;
		left: 0;
		right: 0;
		z-index: 10;
	}
</style>